<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jb-aptech毕业设计项目</TITLE>
<meta name="renderer" content="ie-comp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<script src="../../script/common.js"></script>
<script src="../../script/jquery-3.3.1.min.js"></script>
<script src="../../script/vue.js"></script>
</head>
<body>

<div id="app">
	<div class="page_title">客户信息管理</div>
	<div class="button_bar">
		<button class="common_button" onclick="help('');">帮助</button>
		<button class="common_button" @click.prevent="load()">查询</button>
	</div>
	<table class="query_form_table">
		<tr>
			<th>客户编号</th>
			<td><input v-model="cust.cust_no"/></td>
			<th>名称</th>
			<td><input v-model="cust.cust_name"/></td>
			<th>地区</th>
			<td>
				<select v-model="cust.cust_region">
					<option value="全部">全部</option>
					<option value="北京">北京</option>
					<option value="华北">华北</option>
					<option value="中南">中南</option>
					<option value="东北">东北</option>
					<option value="西部">西部</option>
				</select>
			</td>
		</tr>
		<tr>
			<th>客户经理</th>
			<td><input v-model="cust.cust_manager_name"/></td>
			<th>客户等级</th>
			<td>
				<select v-model="cust.cust_level">
					<option value="全部">全部</option>
					<option value="1">战略合作伙伴</option>
					<option value="2">合作伙伴</option>
					<option value="4">大客户</option>
					<option value="5">普通客户</option>
				</select>
			</td>
			<th>　</th>
			<td>　</td>
		</tr>
	</table>
	<br />
	<table class="data_list_table">
		<tr>
			<th>序号</th>
			<th>客户编号</th>
			<th>名称</th>
			<th>地区</th>
			<th>客户经理</th>
			<th>客户等级</th>
			<th>操作</th>
		</tr>
		<tr v-for="(c,index) in custs">
			<td class="list_data_number" v-text="index">1</td>
			<td class="list_data_text" v-text="c.cust_no">KH071202001</td>
			<td class="list_data_ltext" v-text="c.cust_name">聪海信息科技有限公司</td>
			<td class="list_data_text" v-text="c.cust_region">北京</td>
			<td class="list_data_text" v-text="c.cust_manager_name">小明</td>
			<td class="list_data_text" v-text="c.cust_level_label">战略合作伙伴</td>
			<td class="list_data_op">
				<img @click="edit(c)" title="编辑" src="../../images/bt_edit.gif" class="op_button" />
				<img @click="gotoLinkMan(c.cust_no)" title="联系人" src="../../images/bt_linkman.gif" class="op_button" />
				<img @click="gotoActivities(c.cust_no)" title="交往记录" src="../../images/bt_acti.gif" class="op_button" />
				<img onclick="to('orders.html');" title="历史订单" src="../../images/bt_orders.gif" class="op_button" />
				<img onclick="del('“客户：聪海信息科技有限公司”');" title="删除" src="../../images/bt_del.gif" class="op_button" />
			</td>
		</tr>
		<tr>
			<th colspan="100" class="pager">
				<div class="pager">
					共<span v-text="pageInfo.total"></span>条记录 每页<input :value="pageInfo.pageSize" size="2" />条
					第<input :value="pageInfo.pageNum" size="2"/>页/共2页
					<a href="#">第一页</a>
					<a href="#" @click.prevent="load(pageInfo.pageNum-1)">上一页</a>
					<a href="#" @click.prevent="load(pageInfo.pageNum+1)">下一页</a>
					<a href="#">最后一页</a>
					转到<input value="1" size="2" />页
					<button width="20" onclick="reload();">GO</button>
				</div>
			</th>
		</tr>
	</table>
</div>
</body>
<script>
	const vm = new Vue({
		el:'#app',
		data:{
			custs:[],
			pageInfo:{},
			cust:{
				cust_no:'',
				cust_name:'',
				cust_region:'',
				cust_manager_name:'',
				cust_level:'',
				cust_level_label:'',
				pageSize:5,
				pageNum:1,
			}
		},
		methods:{
			load(num){
				this.cust.pageNum=num
				$.getJSON("/CstCustomer/queryPage",this.cust,json=>{
					this.custs = json.data.pageInfo.list;
					this.pageInfo = json.data.pageInfo;
				});
			},
			edit(c){
				sessionStorage.setItem("c",JSON.stringify(c));
				location="edit.html";
			},
			gotoLinkMan(cust_no){
				location="linkman.html?cust_no="+cust_no;
			},
			gotoActivities(cust_no){
				location="activities.html?cust_no="+cust_no;
			}
		},
		mounted(){
			this.load()
		}
	})
</script>
</html>